<script setup>
import {Back,Search,UserFilled} from '@element-plus/icons-vue'
import getImages from '../api/getImage.js'
import { useUserStore  } from '../stores/user'
import {ref,toRaw,onMounted} from "vue"
import router from '@/router'
import { useRouter } from 'vue-router'
import getUser from '../api/getuser.js'  
import isLogin from '../api/isLogin'
    const use = useRouter();
    const search_flag = ref(toRaw(use).currentRoute.value.fullPath.indexOf("/search")==-1)
    const userInform = useUserStore();
    const username = ref("请登录");
    username.value= userInform.username;
    username.value =  username.value == "请登录" ? localStorage.getItem("username") : username.value ;
    const loginStatus = ref("登录");
    const userFunc = ref([])
    const search_value = ref("")
    const imageForUsername = ref("")
    onMounted(()=>{
      isLogin().then((res)=>{
        if(res.status == 200)
        {
          loginStatus.value = ""
          userFunc.value = [{name : "个人详情" , value:"selfInform"},{name : "设置" , value:"setUser"},{name : "通知" , value:"notice"},{name:"登出" , value:"logout"}]
        }
      })
        if(userInform.userId === ""){
        getUser({}).then(function (response) {
          console.log(userInform.userId);
        if(response.status == 200)
        {
            userInform.userId = response.data.userId ;
            userInform.username = response.data.userName ;
            userInform.image = response.data.imageId;
            userInform.article =  response.data.articleId ;
            localStorage.setItem("username", userInform.username)
            localStorage.setItem("image", userInform.image)
        }
        else {
            localStorage.removeItem("jwttoken");
            localStorage.removeItem("userId");
            localStorage.removeItem("username");
            localStorage.removeItem("image")
            username.value = "请登录"
            userInform.clear();
        }
        })
        }

    }
    )
    imageForUsername.value = userInform.image;
    imageForUsername.value = imageForUsername.value == "" ? localStorage.getItem("image") : imageForUsername.value;
    if(username.value!= undefined && username.value!= "请登录")
    {
        loginStatus.value = ""
        userFunc.value = [{name : "个人详情" , value:"selfInform"},{name : "设置" , value:"setUser"},{name : "通知" , value:"notice"},{name:"登出" , value:"logout"}]
    }
    
    const search_text = ref("搜索")
    const search = ref("all")
    function searchChange(text,value) 
    {
      search_text.value = text ;
      search.value = value ;
    } 

    const errorHandler = () => true

    function toUserFunc (param) {
      use.push(param)
    }
    
    function toFocus()
    {
          let beFocus =  document.getElementById("search");
          beFocus.focus();
    }

    const imageData = ref("")



    getImages(imageForUsername.value).then(
    function(response){
    if(response.status == 200)
    imageData.value = response.data 
    }
    )

    function keydownHandler() {
    if (document.activeElement.tagName === 'INPUT') {
      let values = search_value.value;
      search_value.value = ""
      if (values.length > 0 && values!== "") {
        use.push("/search?searchValue="+values+"&paramValue="+search.value)
      }
    }
    }
    //


</script>

<template>
  <el-menu
    router
    style="width: 85%; position: relative; left: 7%; height: 180%;"
    :default-active="$route.path"
    mode="horizontal"
    background-color="#2e4e7e"
    text-color="#fff"
    active-text-color="#ffd04b"
    menu-trigger="hover"
  >
    <el-menu-item index="/">Hive Inform</el-menu-item>

    <el-sub-menu index="func">
      <template #title>公告</template>
      <el-menu-item index="2-1">更新日志</el-menu-item>
      <el-menu-item index="2-2">使用说明</el-menu-item>
      <el-menu-item index="2-3">活动</el-menu-item>
    </el-sub-menu>

    <el-menu-item index="/articles">文章</el-menu-item>

    <el-menu-item index="/forum" >论坛</el-menu-item>

    <el-sub-menu index="search" style="position: relative; left: 5vw; width: 30vw;" @click="toFocus" v-show="search_flag">
        <template #title>{{ search_text }} <span style="position: relative;  margin-right: 5px;  margin-left: 20px;"><el-icon><Search /></el-icon></span>
        <input v-on:keydown.enter="keydownHandler()" id="search" class="search" type="text" style="" placeholder="搜索" v-model="search_value"></template>
        
        <el-menu-item @Click="searchChange('搜索','all')">搜索</el-menu-item>
        <el-menu-item @Click="searchChange('类型','type')">类型</el-menu-item>
        <el-menu-item @Click="searchChange('作者','author')">作者</el-menu-item>
        <el-menu-item @Click="searchChange('文章编号','id')">文章编号</el-menu-item>
        <el-menu-item @Click="searchChange('文章标题','title')">文章标题</el-menu-item>
    </el-sub-menu>


    <el-menu-item v-show="loginStatus!=''" style="position: relative; margin-left: 15%;" index="/login">
      {{ loginStatus }}
    </el-menu-item>

    <el-sub-menu index="inform" style="border: 0ch; position:absolute; right: 3%; top: 22%; background-color:azure ;">
      <template #title>
      <div class="inform" >
      <span>用户名：{{ username }} </span>
      <span></span>
      </div>
      <div class="image">
      <el-avatar :icon="UserFilled" @error="errorHandler" :src="imageData "/>
      </div>
      </template>
    <el-menu-item style="border: 0ch;" v-for="item in userFunc" @click=" toUserFunc(item.value)" :key="item">{{ item.name }}</el-menu-item>
    </el-sub-menu>
  </el-menu>


</template>

<style>

@import url(@/css/header.css);
</style>